<template>
  <div>
    <div id="video-container" class="video-container">
      
    </div>
    <h3 class="video_name">
      {{ arr.region }}--{{ arr.name }} {{ videos[playIndex]["name"] }}
    </h3>

    <van-tabs v-model:active="tabIndex">
      <van-tab title="控制" key="0" />
      <van-tab title="监控列表" key="1" />
    </van-tabs>
    <div v-if="tabIndex==0">
      <div class="control-box">
        <div>
          <svg class="icon" @click="controlyun(0)" aria-hidden="true">
            <use xlink:href="#icon-xiangshang"></use>
          </svg>
        </div>

        <div class="middle-control">
          <svg class="icon" @click="controlyun(2)" aria-hidden="true">
            <use xlink:href="#icon-xiangzuo"></use>
          </svg>
          <div class="sf-1">
            <div class="sf-icon" @click="controlyun(8)">+</div>
            <div class="sf-icon" @click="controlyun(9)">-</div>
          </div>
          <svg class="icon" @click="controlyun(3)" aria-hidden="true">
            <use xlink:href="#icon-xiangyou"></use>
          </svg>
        </div>

        <div>
          <svg class="icon" @click="controlyun(1)" aria-hidden="true">
            <use xlink:href="#icon-xiangxia"></use>
          </svg>
        </div>

      </div>
    </div>
    <div v-if="tabIndex==1">
      <div class="table-scroll">
        <table class="video-table-list">
          <tr>
            <th>序号</th>
            <th>名称</th>
          </tr>
          <tr :class="{ 'play-active': index == playIndex }" v-for="(item, index) in videos" @click="playIndex = index">
            <td>{{ index + 1 }}</td>
            <td>{{ item.name }}</td>
          </tr>
        </table>
      </div>
    </div>
   
  </div>
</template>

<script>
  import { fetchData } from "@/api/apiList";
  import EZUIKit from "ezuikit-js";
  import videoList from "@/utils/videoData";
  import axios from 'axios'
  export default {
    data() {
      var menusList = [
        { title: "视频站点", path: "/videoList" },
      ];
      if (this.$route.query.type == 0) {
        menusList.push({ title: "库容曲线", path: "/water-list/water/storage" });
      }
      var arr = videoList.find((item, index) => this.$route.query.id == item.id);
      var videos = arr.monitor;
      return {
        allList: videoList,
        arr,
        videos,
        accessToken: "",
        play: [],
        playIndex: 0,
        playloading: false,
        menusList,
        tabIndex: 0,
        cLoading: false
      };
    },
    created() { },
    watch: {
      async playIndex(new_val, old_val) {
        if (new_val == old_val || this.playloading) {
          this.playIndex = old_val;
          return;
        }
        this.playloading = true;
        this.play.stop();
        this.play
          .changePlayUrl({
            hd: false,
            accessToken: this.accessToken,
            deviceSerial: this.videos[new_val].serverid,
            channelNo: this.videos[new_val].channel,
          })
          .then((res) => {
            this.playloading = false;
          })
          .catch((error) => {
            this.playloading = false;
            console.log(error);
          });
      },
    },
    mounted() {
      this.initData();
    },
    methods: {
      async initData() {
        this.videos = this.videos.map((item) => {
          return Object.assign(item, {
            url: "ezopen://open.ys7.com/" + item.serverid + "/" + item.channel + ".live",
          });
        });
        this.accessToken = await this.getVideoTK();
        this.$nextTick(() => {
          this.playVideo();
        });
      },

      getVideoTK() {
        var promise = new Promise((resolve) => {
          if (typeof window.accessToken !== "string") {
            const script = document.createElement("script");
            script.src =
              "https://api.xingfeng666.cn:8998/zp/public/index.php?m=index&c=index&a=ysy";
            document.getElementsByTagName("body")[0].appendChild(script);
            this.interval = setInterval(() => {
              if (typeof window.accessToken === "string") {
                clearInterval(this.interval);
                resolve(window.accessToken);
              }
            }, 100);
          } else {
            resolve(window.accessToken);
          }
        });
        return promise;
      },

      //https://open.ys7.com/help/59#device_ptz-api1
      //操作命令：0-上，1-下，2-左，3-右，4-左上，5-左下，6-右上，7-右下，8-放大，9-缩小，10-近焦距，11-远焦距，16-自动控制
      async controlyun(directio) {
        if (!this.play) {
          return;
        }
        //this.play.openPtz();
        if (this.cLoading) {
          return;
        }
        const formData = new FormData();
        var params = {
          speed: 1,
          direction: directio,
          accessToken: this.accessToken,
          deviceSerial: this.play.deviceSerial,
          channelNo: Number(this.play.channelNo)
        }
        for (let k in params) {
          formData.append(k, params[k])
        }
        this.cLoading = true;
        axios.post('https://open.ys7.com/api/lapp/device/ptz/start', formData)
          .then((res) => { this.cLoading = false; this.playStop(params) })
          .catch((error) => { console.log(error); this.cLoading = false; this.playStop(params) });
      },
      async playStop(params) {
        const formData = new FormData();
        for (let k in params) {
          formData.append(k, params[k])
        }
        axios.post('https://open.ys7.com/api/lapp/device/ptz/stop', formData);
      },
      async playVideo() {
        this.play = await new EZUIKit.EZUIKitPlayer({
          id: "video-container",
          accessToken: this.accessToken,
          url: this.videos[this.playIndex].url,
          audio: 0,
          templete: "security",
          handleError: (err) => {
            // console.error("视频播放错误：", err.msg)
          },
          handleSuccess: (success) => {

          }
        });

      },
    },
  };
</script>
<style scoped>
  .video-container {
    width: 100vw;
    height: 80vw;
  }

  .video-table-list {
    font-size: 14px;
    width: 100%;
    /* height: 26vh; */
    /* overflow-y: auto; */
    text-align: center;
  }

  .video-table-list td {
    border: 2px solid #ebeef5;
    padding: 5px;
  }

  .video-table-list th {
    background: #c9e2f8;
    color: #335ed3;
    font-weight: 400;
    padding: 5px 0;
  }

  h3.video_name {
    text-align: center;
    padding: 5px 0;
    border-bottom: 1px solid #b4b4b4;
    margin: 0;
  }

  tr.play-active {
    background: #ffb800;
  }

  .table-scroll {
    overflow-y: auto;
    height: 40vh;
    position: relative;
  }

  .table-scroll th {
    position: sticky;
    top: 0;
  }

  .control-box .icon {
    width: 60px;
    height: 60px;
  }


  .control-box {
    text-align: center;
    margin-top: 25px;
    width: 70vw;
    margin: auto;
    /* padding-top: 35px; */
    height: 70vw;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* margin-top: 37px; */
    border: 1px solid #a5a5a5;
    border-radius: 50%;
    margin-top: 10px;
  }

  .middle-control {
    /* display: flex; */
    
    display: flex;
    justify-content: space-between;
  }

  .middle-control .icon {}

  .sf-1 {
    display: flex;
    align-items: center;
  }

  .sf-icon {
    font-size: 30px;
    padding: 1px 20px;
    margin: 0 15px;
    text-align: center;
    border: 1px solid;
    border-radius: 5px;
    background: #1196db;
    color: white;
    width: 55px;
  }
</style>